<template>
    <div class="fillcontain">
        <head-top></head-top>
        <div class="table_container">
            <!--表格头部-->
            <el-form :inline="true" class="demo-form-inline">
                <el-form-item label="请假人姓名">
                    <el-input placeholder="请输入人员信息" v-model="queryParams.userName"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="selectSubmit">查询</el-button>
                </el-form-item>
            </el-form>
            <el-table :data="tableData" highlight-current-row style="width: 100%">
                <el-table-column prop="id" label="编号"  width="50"></el-table-column>
                <el-table-column prop="userName" label="用户名" width="50"></el-table-column>
                <el-table-column prop="leaveType" label="请假类型" width="50"></el-table-column>
                <el-table-column prop="leaveReason" label="请假原因" width="90"></el-table-column>
                <el-table-column prop="biginTime" label="开始时间" width="100"></el-table-column>
                <el-table-column prop="realBiginTime" label="实际开始时间" width="120"></el-table-column>
                <el-table-column prop="endTime" label="结束时间" width="120"></el-table-column>
                <el-table-column prop="realEndTime" label="实际结束时间" width="120"></el-table-column>
                <el-table-column prop="realDuration" label="实际时长" width="120"></el-table-column>
                <el-table-column prop="leaveStat" label="审核状态" width="50"></el-table-column>
                <el-table-column prop="remark" label="备注" width="100"></el-table-column>
                <el-table-column prop="sellingOffTime" label="销假时间" width="100"></el-table-column>
                <el-table-column prop="deductionStandard" label="元/每小时" width="100"></el-table-column>
                <el-table-column prop="insertTime" label="创建时间" width="120"></el-table-column>

                <el-table-column label="操作" >
                    <template slot-scope="scope" >
                        <el-button type="primary" >编辑</el-button>
                        <el-button type="danger"  @click="LeaveDel(scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

        </div>
    </div>

</template>

<script>
    import { leaveList,LeaveDel } from "../api/leave";


    export default {
        components: {},
        data() {
            return {
                //         // 模态框显示隐藏
                dialogVisible: false,
                //         // 表格数据
                tableData: {
                    id:null,
                    staff_id:null,//人员编号
                    userName:"",//用户名
                    leaveType:"",//请假类型
                    deductionStandard:"",//扣款标准，**元/小时
                    leaveReason:"",//扣款标准
                    biginTime:"",//开始时间
                    realBiginTime:"",//实际开始时间
                    endTime:"",//结束时间
                    realEndTime:"",//实际结束时间
                    realDuration:"",//实际时长
                    examineStaffId:null,//审核人
                    leaveStat:null,//审核状态(批准，不批准)
                    remark:"",//
                    sellingOffTime:"",//销假时间
                    insertTime:"",//销假时间
                    stat:"",//0无效，1有效
                    deductionStandard:""//元/每小时
                },
                total:0,
                //获取表格数据条件
                queryParams: {
                    //
                    query: "",
                    userId: "",
                    page:0,
                    times:null,
                    time:null,
                    limit: 10
                }
            };
        },
        created() {


            this.fetchData();
        },
        methods: {
            //     // 获取表格数据
            fetchData() {
                leaveList(this.queryParams).then(res => {
                    res.data.forEach((item, index, arr) => {
                        // 请假类型(事假，病假，产假，丧假，默认事假)

                        if (item.leaveType === '2') {
                            item.leaveType = '病假'
                        } else if (item.leaveType === '3') {
                            item.leaveType = '产假'
                        } else if (item.leaveType === '4') {
                            item.leaveType = '丧假'
                        } else {
                            item.leaveType = '事假'
                        }
                        // 审核状态：0-待审核，1-批准，2-不批准
                        if (item.leaveStat === '1') {
                            item.leaveStat = '批准'
                        } else if (item.leaveStat === '2') {
                            item.leaveStat = '不批准'
                        } else {
                            item.leaveStat = '待审核'
                        }

                    })
                    this.tableData = res.data
                    this.queryParams.page = res.page
                    this.total = res.total



                });
            },
            // 改变每页显示数据
            handleSizeChange(val) {
                this.queryParams.limit = val;
                this.fetchData();
            },
            // 改变页码
            handleCurrentChange(val) {
                console.log(val);
                this.queryParams.page = val;
                this.fetchData();
            },
            //根据条件查询数据
            selectSubmit() {
                this.fetchData();
            },
            LeaveDel(id){
                LeaveDel({id:id}).then((res) => {
                    let title
                    let type
                    if (res.code === 200) {
                        this.$notify({
                            title: '成功',
                            type: 'success',
                            message: res.msg,
                            duration: 2000
                        })
                        this.dialogVisible = false
                        this.queryParams.id=null
                        this.fetchData()
                    } else {
                        this.$notify({
                            title: '失败',
                            type: 'error',
                            message: res.msg,
                            duration: 2000
                        })
                    }
                })
            }

        }
    };
</script>


<style lang="less">
    @import "../style/mixin";
    .table_container {
        padding: 20px;
    }
</style>
